<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>手风琴效果</title>
</head>
<style>
*{
  margin: 0;
  padding: 0;
}
/* 第二步：开始写CSS样式 */
/* 首先，先把简单的手风琴布局样式写好 */
.acciodMenu{
  width: 600px;
  margin: 220px auto;
  background-color: #fff;
}
.acciodMenu h2{
  margin: 5px 0;
  font-size: 16px;
  line-height: 16px;
}
.acciodMenu h2 a{
  position: relative;
  padding: 10px;
  display: block;
  text-decoration: none;
  background-color: #000;
  color: #fff;
  border-radius: 6px;
}
.acciodMenu h2 a:before{
  content: '';
  position: absolute;
  right: 10px;
  top: 15px;
  width: 0;
  height: 0;
  border: 6px solid #fff;
  /* 标题后面的三角形往右，表示当前未展开 */
  border-color: #fff transparent transparent;
}
/* 鼠标移入标题改变样式 */
.acciodMenu h2:hover a{
  background-color: #ff6600;
  color: #fff;
}

/* 使用transition设置p高度变化的动画 */
.acciodMenu p{
  padding: 0 10px;
  height: 0;
  overflow: hidden;
  font-size: 16px;
  line-height: 30px;
  transition: height 0.4s ease-in;
}

/* 使用target选择器选取选中的标题 */
/* 更改标题的样式 */
.acciodMenu h2:target a{
  background: #ff6600;
  color: #fff;
}

/* 选中标题后面的p标签设置高度 */
.acciodMenu h2:target~p {
  height: 100px;
}

/* 选中标题后面的三角形往下，表示展开 */
.acciodMenu h2:target a::before{
  top: 13px;
  right: 6px;
  border-color: transparent transparent transparent #fff;
}
</style>
<body>
  <!-- 第一步：先写好我们的手风琴布局 分为标题和内容部分-->
  <!-- 因为我们要使用到选择器target
       所以H2的id要和A标签的锚点对应起来 -->
  <div class="acciodMenu">
    <div class="subAcciodMenu">
      <h2 id="qianduan">
        <a href="#qianduan">什么是前端</a>
      </h2>
      <p>前端即网站前台部分，运行在PC端
        移动端等浏览器上展现给用户浏览的网页。
        随着互联网技术的发展，HTML5，CSS3，
        前端框架的应用，跨平台响应式网页设计
        能够适应各种屏幕分辨率，合适的动效设计，
        给用户带来极高的用户体验。</p>
    </div>
    <div class="subAcciodMenu">
      <h2 id="php">
        <a href="#php">什么是PHP</a>
      </h2>
      <p>php通常指超文本预处理器，用于面向对象、
        命令式编程，是一种通用开源脚本语言。
        其主要特点为开源性和免费性、快捷性、
        数据库连接的广泛性、面向过程和面向对象并用。
        优点是利于学习，使用广泛。</p>
    </div>
    <div class="subAcciodMenu">
      <h2 id="golang">
        <a href="#golang">什么是Golang</a>
      </h2>
      <p>golang又称go语言是一种静态强类型、编译型语言，
        是一个开源编程环境，可以轻松构建简单、可靠和高
        效的软件。 Go 语言语法与 C 相近，但功能上有：
        内存安全，GC，结构形态及 CSP-style 并发计算。.
      </p>
    </div>
  </div>
</body>
</html>